New form attributes
placeholder
A placeholder attribute tells the user what data needs to be entered in the form of text in a lighter shade. After the user enters characters in the text field, the text in the lighter shade disappears.
Let's look at the following code to understand it better:
<!DOCTYPE html>
<html>
<head>
<title>
The Placeholder Attribute
</title>
<h1> The Placeholder Attribute </h1>
</head>
<div>
Enter the name of the animal in the search box below and click on Go
<br><br>
<label for="animal">Animal Name : </label>
<input id="animal" placeholder="Enter the animal name">
<input type="submit" value="Go">
</div>
</html>
In the following screenshot, the text box containing the lighter shade text demonstrates the placeholder effect:
We can see the text Enter the animal name in a lighter shade. After we click on the textbox, the text disappears. Hence, it is just a way to let the user know what input is expected.
autofocus
With this attribute, the browser sets the focus on the field where autofocus is
defined when the page is being loaded.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Autofocus attribute </title>
<h1>The Autofocus Attribute</h1>
</head>
<p> Login page for Packt Publishing</p>
<div>
<br>
<label for="name">Login Name :</label>
<input id ="name" type="text">
<input type="submit" value="Go">
<br>
or
<br>
<label for="loginid">Login Id :</label>
<input id ="loginid" type="text" autofocus>
<input type="submit" value="Go">
</div>
</html>
Hence, the user doesn't have to click on a field when the page loads up as it is set
to autofocus.
required
The required attribute makes it mandatory for the user to enter a value in the field. If the user doesn't enter any data in the ield with the required attribute, then it will prompt the user accordingly.
The output is different in Opera and Firefox, hence we will display screenshots for both the cases.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title> Required attribute </title>
<h1> The Required Attribute </h1>
<br>
</head>
<hr>
<br>
<form>
<label for="loginid"><em>Login name<em> : </label>
<input name="loginid" type="text" required>
<input type="submit" value="Submit">
</form>
</html>
OUTPUT
We have seen how the output looks in a Firefox browser.
datalist
The datalist attribute is used to create a list of pre-defined items as a drop-down menu. On using this tag, the pre-defined menu items get displayed when we click on the textbox.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Datalist attribute</title>
<h1> The Datalist Attribute </h1>
</head>
<p> <em> Genres of Music </em> </p>
<div>
<label for="fstrd"> Music : </label>
<input id="fstrd" name="fstrd" type="text" list="music">
<input type="submit" value ="Go">
<datalist id="music">
<option value="Pop">
<option value="Rock">
<option value="Jazz">
<option value="Blues">
<option value="Classical">
</datalist>
</div>
</html>
OUTPUT
For example, the drop-down menu displays all the genres of music when we click in the textbox. However, we are not just limited to the menu items declared in the code. We can enter any data that is not a part of the list declared in the code.